<template>
    <list>
      <header>
      <text class="text-header">{{title}}</text>
      </header>
     <cell  v-for="(name,index) in dataList" :key="name" :ref="name">
      <div @appear="(e) => { handleAppear(e, 'block1');}"  @click="jump(name)"  class="panel">
        <text  class="text" style="font-size:25px">{{name}}</text>
      </div>
     </cell>
  </list>
</template>
<script>
var navigator = weex.requireModule("navigator");
var modal = weex.requireModule("modal");
const dom = weex.requireModule("dom");
import { push, toast, getImageUrl, alert } from "../utils/config.js";
export default {
  created() {
    this.jumpState = false;
  },
  data: function() {
    return {
      title: weex.config.bundleUrl,
      jumpState: false,
      dataList: [
        "Weex环境变量",
        "Android接口",
        "A标签",
        "Image标签",
        "List标签",
        "Loading和Refresh标签",
        "Web标签",
        "Textarea标签",
        "Module拓展",
        "学习VueAPI",
        "GlobalEvent全局事件",
        "学习Slot",
        "生命周期",
        "动态组件",
        "JS缓存"
      ],
      dataLinkList: {
        Weex环境变量: "WeexEnvironment.js",
        Android接口: "AndroidInterFace.js",
        A标签: "A.js",
        Image标签: "Image.js",
        List标签: "List.js",
        Loading和Refresh标签: "LoadingAndRefresh.js",
        Web标签: "Webs.js",
        Textarea标签: "Textarea.js",
        Module拓展: "Module.js",
        学习VueAPI: "LearnVueAPI.js",
        GlobalEvent全局事件: "GlobalEvent.js",
        学习Slot: "StudySlot.js",
        生命周期: "LifeCycle.js",
        动态组件: "DynamicComponents.js",
        JS缓存: "TestCache.js"
      }
    };
  },
  methods: {
    jump: function(jumpName) {
      let self = this;
      push(self.dataLinkList[jumpName], event => {});
    },
    goTo: function(value) {
      let self = this;
      // alert(self.$refs[value);
      // const el = self.$refs[value][0];
      const el = self.$refs[value][0];
      dom.scrollToElement(el, { offset: -110 });
    },
    handleAppear(e, id) {
      let self = this;
      if (!self.jumpState) {
        self.jumpState = true;
        self.goTo("生命周期");
      }
    }
  },
  mounted: function() {
    this.goTo("GlobalEvent全局事件");
  }
};
</script>
<style scoped>
.text-header {
  width: 750px;
  padding: 25px;
  font-size: 40px;
  text-align: center;
  color: #41b883;
  font-weight: bold;
  background-color: rgb(162, 217, 192);
}
.text {
  font-size: 40px;
  text-align: center;
  color: #41b883;
  font-weight: bold;
}
.panel {
  width: 730px;
  height: 100px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px;
  border-width: 2px;
  border-style: solid;
  border-color: rgb(162, 217, 192);
  background-color: rgba(162, 217, 192, 0.2);
}
</style>